<template>
  <div class="content">
    <div ref="chartsRef" style="width: 1000px; height: 550px"></div>
  </div>
</template>

<script lang="ts" setup>
  import * as echarts from 'echarts'
  import axios from 'axios'
  import zhongguo from '@/assets/mapJson/china.json'
  import { ref, onMounted } from 'vue'

  const geo = {
    map: 'china', //名字是china，南海诸岛会以缩略图展示，但是以此之外来命名地图，则不会展示缩略图。
    label: {
      // 通常状态下的样式
      show: true,
      color: '#fff',
    },
    // 地图区域的样式设置
    itemStyle: {
      borderColor: 'rgba(147, 235, 248, 1)',
      borderWidth: 1,
      areaColor: {
        type: 'radial',
        x: 0.5,
        y: 0.5,
        r: 0.8,
        colorStops: [
          {
            offset: 0,
            color: 'rgba(147, 235, 248, 0)', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(147, 235, 248, .2)', // 100% 处的颜色
          },
        ],
        globalCoord: false, // 缺省为 false
      },
      shadowColor: 'rgba(128, 217, 248, 1)',
      shadowOffsetX: -2,
      shadowOffsetY: 2,
      shadowBlur: 10,
    },

    // 鼠标放上去高亮的样式
    emphasis: {
      label: {
        color: '#fff',
      },
      itemStyle: {
        areaColor: '#389BB7',
        borderWidth: 0,
      },
    },
  }

  const series = [
    {
      // 散点气泡 涟漪线条扩散
      name: '',
      type: 'effectScatter',
      coordinateSystem: 'geo', //该系列使用的坐标系
      symbolSize: function (val: any) {
        // 涟漪特效动画的散点 波纹大小
        const baseSize = (val[2] / 50) * 3
        if (baseSize >= 10) {
          return 10
        } else if (baseSize <= 3) {
          return 3
        }
        return baseSize
      },
      showEffectOn: 'render',
      rippleEffect: {
        // 涟漪特效相关配置。
        brushType: 'stroke',
        period: 10,
        scale: 7,
        number: 4,
      },
      itemStyle: {
        color: '#FF5959',
        shadowBlur: 10,
        shadowColor: '#FF5959',
      },
      zlevel: 1,
      // data: setLineData(getData).scatterData
      data: [],
    },
    {
      type: 'lines', //飞线
      zlevel: 3,
      effect: {
        show: false,
      },
      lineStyle: {
        color: 'yellow',
        width: 2,
        opacity: 1,
        curveness: 0.2,
      },
      // data: setLineData(getData).lineData
      data: [],
    },
  ]

  const option = ref()
  const chartsRef = ref()
  const chartsInstance = ref()

  // 初始化
  const initCharts = () => {
    chartsInstance.value = echarts.init(chartsRef.value)
    option.value = {
      backgroundColor: '#404a59', // 背景颜色
      geo, // 地图配置
      series,
    }
    // 地图注册，第一个参数的名字必须和option.geo.map一致
    echarts.registerMap('china', zhongguo)

    chartsInstance.value.setOption(option.value)
  }

  interface LineData {
    sName: string
    eName: string
    sLonLat: number[]
    eLogLat: number[]
  }
  // 请求回来的数据
  // const getData = [
  //   { sName: '深圳', eName: '武汉', sLonLat: [114.07, 22.62], eLogLat: [114.31, 30.52] },
  //   { sName: '深圳', eName: '郑州', sLonLat: [114.07, 22.62], eLogLat: [113.65, 34.76] },
  //   { sName: '深圳', eName: '兰考', sLonLat: [114.07, 22.62], eLogLat: [114.81, 34.85] },
  //   { sName: '武汉', eName: '郑州', sLonLat: [114.31, 30.52], eLogLat: [113.65, 34.76] },
  //   { sName: '武汉', eName: '济源', sLonLat: [114.31, 30.52], eLogLat: [112.6, 35.06] },
  //   { sName: '武汉', eName: '兰考', sLonLat: [114.31, 30.52], eLogLat: [114.81, 34.85] },
  //   { sName: '郑州', eName: '济源', sLonLat: [113.65, 34.76], eLogLat: [112.6, 35.06] },
  //   { sName: '郑州', eName: '兰考', sLonLat: [113.65, 34.76], eLogLat: [114.81, 34.85] },
  //   { sName: '郑州', eName: '晋城', sLonLat: [113.65, 34.76], eLogLat: [112.86, 35.5] },
  //   { sName: '济源', eName: '晋城', sLonLat: [112.6, 35.06], eLogLat: [112.86, 35.5] },
  //   { sName: '晋城', eName: '太原', sLonLat: [112.86, 35.5], eLogLat: [112.53, 37.87] },
  //   { sName: '鹤壁', eName: '兰考', sLonLat: [114.27, 35.73], eLogLat: [114.81, 34.85] },
  //   { sName: '鹤壁', eName: '晋城', sLonLat: [114.27, 35.73], eLogLat: [112.86, 35.5] },
  //   { sName: '鹤壁', eName: '太原', sLonLat: [114.27, 35.73], eLogLat: [112.53, 37.87] },
  // ]
  // series需要的飞线数据结构
  // const lineData = [
  //   {
  //     coords: [
  //       [114.27, 35.73],
  //       [112.53, 37.87],
  //     ],
  //     fromName: '鹤壁',
  //     toName: '太原',
  //   },
  // ]

  // series需要的涟漪图标对应的数据结构
  // const scatterData = [
  //   { name: "安徽", value: [117.27190478, 30.9869525, 666] },
  //   { name: "江西", value: [115.62540309, 28.35185683, 1007] },
  // ]

  // 根据请求回来的数据处理成series需要的飞线数据结构 和 飞线对应的城市涟漪图标
  const setLineData = (getData: Array<LineData>) => {
    const _scatterData: Array<any> = [] // 飞线对应城市的坐标 涟漪图标 的结果集
    const scatterData: Array<any> = [] // 最终飞线对应城市的坐标 涟漪图标 数据结构
    const lineData: Array<any> = [] // 飞线数据结构

    getData.forEach((item: LineData) => {
      lineData.push({
        // 处理飞线数据结构
        fromName: item.sName,
        toName: item.eName,
        coords: [item.sLonLat, item.eLogLat],
      })

      // 处理飞线对应的城市涟漪图标
      if (!_scatterData.includes(item.sName)) {
        _scatterData.push(item.sName)
        scatterData.push({ name: item.sName, value: [...item.sLonLat, 50] })
      }
      if (!_scatterData.includes(item.eName)) {
        _scatterData.push(item.eName)
        scatterData.push({ name: item.eName, value: [...item.eLogLat, 100] })
      }
    })

    return { scatterData, lineData }
  }

  onMounted(() => {
    initCharts()

    // 请求数据 重置数据
    axios.get('http://localhost:3000/flyLine').then((res: { data: LineData[] }) => {
      const { scatterData, lineData } = setLineData(res.data)
      option.value.series[0].data = scatterData
      option.value.series[1].data = lineData
      chartsInstance.value.setOption(option.value) // 重新渲染echart
    })
  })
</script>
